<template>
  <div class="stationSearch" :style="{ top, right }">
    <div class="searchInput">
      <a-input
        class="searchIpt"
        v-model:value="state.searchValue"
        placeholder="搜索地图站点"
        allowClear
        @pressEnter="handleClickSearch"
        @focus="state.isShowSearch = true"
        @blur="blurSearch"
        @change="changeSearch"
      />
      <div class="toright">
        <button class="searchBtn" @click="handleClickSearch"><search-outlined /></button>
      </div>
    </div>
    <div class="searchResult" :class="{ isShowSearch: state.isShowSearch }">
      <div class="inputbg"></div>
      <div class="resultArea">
        <div class="searchBox">
          <ul class="listWrapper">
            <li
              class="listItem"
              v-for="(item, index) in state.searchData"
              :key="index"
              :class="{isActive: state.isActive === index}"
              @click="handleClickStation(item, index)"
            >
              <div class="txt">
                <span class="number">
                  <Icon icon="fa6-solid:location-pin" :size="24" />
                  <em>{{ index + 1 }}</em>
                </span>
                <template v-if="item.STNM || item.stnm">
                  <span class="name">
                    {{ item.STNM ? item.STNM : item.stnm }}
                  </span>
                </template>
                <template v-if="item.STCD || item.stcd">
                  <span class="type">
                    {{ item.STCD ? item.STCD : item.stcd }}
                  </span>
                </template>
                <template v-if="item.deviceName">
                  <span class="name">{{ item.deviceName }}</span>
                </template>
                <template v-if="item.deviceCode">
                  <span class="type">{{ item.deviceCode }}</span>
                </template>
              </div>
              <template v-if="item.STLC || item.stlc">
                <p class="loc">所在地：{{ item.STCD ? item.STLC : item.stlc }}</p>
              </template>
              <template v-if="item.installAddr">
                <p class="loc">安装地：{{ item.installAddr }}</p>
              </template>
            </li>
          </ul>
          <a-empty :image="state.simpleImage" class="emptyImage" v-show="state.searchData.length < 1"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, toRaw, unref } from 'vue';
  import { useAddTipsPoint } from './useAddTipsPoint';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import selectedIcon from '@/assets/icon/A001.png';
  import { Icon } from '@gui-pkg/components';
  import { message } from 'ant-design-vue';
  import { Empty } from 'ant-design-vue';
  import { getGlobalMap } from '@/components/GlobalMap';

  const state = reactive({
    simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    isShowSearch: false,
    searchValue: '',
    searchData: [],
    isActive: false,
  });

  const props = defineProps({
    mapStationData: {
      type: Object,
      default: null,
    },
    top: {
      type: String,
      default: '80px',
    },
    right: {
      type: String,
      default: '6px',
    },
  });

  const handleClickSearch = () => {
    const mapStationData = toRaw(unref(props.mapStationData));
    if (state.searchValue === '' || state.searchValue === undefined || mapStationData === null) {
      state.searchData = [];
      return;
    }
    const queryValue = state.searchValue.toLowerCase();
    const mapStationDataArr = [...mapStationData];
    const stcdArrList = mapStationDataArr.filter((e) => {
      if (e.stcd) {
        return e.stcd.toLowerCase().includes(queryValue);
      }
    });
    const stnmArrList = mapStationDataArr.filter((e) => {
      if (e.stnm) {
        return e.stnm.toLowerCase().includes(queryValue);
      }
    });
    const searchData = [...stcdArrList, ...stnmArrList];
    if (searchData.length > 20) {
      state.searchData = searchData.slice(0, 20);
    } else {
      state.searchData = searchData;
    }
  };

  // 点击搜索站点
  const handleClickStation = (data, index) => {
    state.isActive = index;
    let stationData = toRaw(data);
    let lgdLtd = { lgtd: 0, lttd: 0 };
    if (stationData.lgtd) {
      lgdLtd.lgtd = stationData.lgtd;
      lgdLtd.lttd = stationData.lttd;
    }
    if (stationData.installLgtd) {
      lgdLtd.lgtd = stationData.installLgtd;
      lgdLtd.lttd = stationData.installLttd;
    }
    addTipsPointData(lgdLtd);
  };

  const addTipsPointData = (data) => {
    const globalMap = getGlobalMap();
    const { addTipsPoint, removeLayer } = useAddTipsPoint(globalMap);
    if (!data.lgtd || data.lgtd==0) {
      removeLayer();
      message.warning('暂未找到该站点的位置信息！');
      return;
    }
    const pointInfo = {
      lgtd: data.lgtd,
      lttd: data.lttd,
      icon: selectedIcon,
      iconScale: 1,
      zoom: 14,
    };
    removeLayer();
    addTipsPoint(pointInfo);
  };

  const blurSearch = () => {
    if (!state.searchValue) {
      state.isShowSearch = false;
    }
  }

  const changeSearch = (row)=> {
    // console.log(row.target.tagName, 'row', row.type);
    // 触发清除
    if (row.type == 'click') {
      handleClickClose();
    }
  };
  // 点击关闭
  const handleClickClose = () => {
    const globalMap = getGlobalMap();
    const { removeLayer } = useAddTipsPoint(globalMap);
    state.isShowSearch = false;
    state.searchValue = '';
    state.searchData = [];
    removeLayer();
  };
</script>

<style lang="less" src="./style.less"></style>
